<template>
  <div>
    <h2 style="text-align: center">管理员信息</h2>
    <el-input
      v-model="input"
      placeholder="请输入您要查询的信息"
      size="large"
      type="text"
      style="width: 60vh; margin-left: 50vh; margin-bottom: 10px"
    />
    <el-row style="height: 5vh">
      <!-- <el-col :span="3" 
        ><el-button type="primary" plain>
          <el-icon style="vertical-align: middle">
            <el-icon><Search /></el-icon>
          </el-icon>
          <span style="vertical-align: middle">搜索</span>
        </el-button></el-col> -->
      <el-col :span="3" style="margin-left: 520px"
        ><el-button type="primary" plain>
          <el-icon style="vertical-align: middle">
            <Edit />
          </el-icon>
          <span style="vertical-align: middle"> 修改 </span>
        </el-button></el-col
      >
      <el-col :span="3" style="margin-left: 10px"
        ><el-button type="primary" plain @click="refresh">
          <el-icon style="vertical-align: middle">
            <el-icon><Loading /></el-icon>
          </el-icon>
          <span style="vertical-align: middle">刷新</span>
        </el-button></el-col
      >
      <el-col :span="3" style="margin-left: 10px"
        ><el-button type="primary" plain @click="deleteRow">
          <el-icon style="vertical-align: middle">
            <el-icon><Delete /></el-icon>
          </el-icon>
          <span style="vertical-align: middle">删除</span>
        </el-button></el-col
      >
    </el-row>
    <el-table
      ref="singleTableRef"
      :data="tableData"
      style="width: 100%"
      max-height="75vh"
      height="75vh"
      size="default"
      fit="true"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @row-click="setValue"
      highlight-current-row
      v-loading="loading"
      element-loading-text="Loading..."
      :element-loading-spinner="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
      element-loading-background=""
    >
      <el-table-column fixed prop="id" label="实验室编号" min-width="20px" />
      <el-table-column prop="pic" label="头像">
        <template #default="scope">
          <img :src="scope.row.pic" class="image"
        /></template>
      </el-table-column>
      <el-table-column prop="name" label="管理员账号" />

      <el-table-column prop="password" label="管理员密码" />
      <el-table-column prop="phone" label="电话号码" />
    </el-table>
  </div>

  <el-row></el-row>
</template>
 <script>
import axios from "axios";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
export default {
  name: "Adminiinformation",
  data() {
    return {
      loading: false,
      tableData: [],
      input: "",
      value: {
        id: "",
      },
    };
  },
  methods: {
    //用户搜索
    search() {
      axios
        .post("http://localhost:8081/admin/list", {
          name: this.name,
        })
        .then((res) => {
          if (res.status === 200) {
            this.tableData = res.data;
          }
        });
    },
    //刷新
    refresh() {
      this.loading = true;
      if (this.loading) {
        var loadingTime = setInterval(() => {
          this.loading = false;
          clearInterval(loadingTime);
        }, 1000);
      }
      axios.post("http://localhost:8081/admin/list", {}).then((res) => {
        if (res.status === 200) {
          this.setValue({ id: 0 });
          ElMessage({
            message: "刷新管理员信息成功",
            type: "success",
          });
          this.tableData = res.data;
        }
      });
    },
    //删除
    deleteRow() {
      if (this.value.id == 0) {
        ElNotification({
          title: "管理员信息",
          message: "未被选中",
          type: "warning",
        });
      } else {
        ElMessageBox.confirm(
          "确定删除编号为" + this.value.id + "的信息吗?",
          "Warning",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then((res, action) => {
          axios
            .post("http://localhost:8081/admin/delete", {
              id: this.value.id,
            })
            .then((res) => {
              this.search();
              ElMessage({
                message: "删除成功管理员id为" + this.value.id + "的信息",
                type: "success",
              });
            })
            .catch((error) => {
              ElMessage.error("删除失败，网络错误：" + error);
            });
        });
      }
    },
    setValue(value) {
      this.value = value;
    },
    //
    update() {
      axios
        .post("http://localhost:8081/admin/update", {
          id: this.value.id,
        })
        .then((res) => {
          this.search();
          ElMessage({
            message: "更新成功id为" + this.value.id,
            type: "success",
          });
        });
    },
     // 上传头像前的处理
     beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }
      return isJPG;
    },
    // 上传头像成功后的处理
    handleAvatarSuccess(response, file) {
      this.editedData.avatar = URL.createObjectURL(file.raw);
      // 你也可以在这里处理服务端返回的图像链接，具体取决于你的后端实现
    },
    //打印
    getTabelInfo() {
      // let _that = this;
      axios
        .post("http://localhost:8081/admin/list", {
          id: this.id,
          username: this.username,
          pic: this.url,
          password: this.password,
          phone: this.phone,
        })
        .then((response) => {
          this.tableData = response.data;
          console.log(response.data); //请求正确时执行的代码
          //     console.log(_that.tableData)//先打印一下空数组
          //     _that.tableData=response.data//将后台传递的数组赋值给定义的空数组
          //     console.log(_that.tableData)//检查一下数组内是否有数据
          // }).catch(function(response){
          //     console.log(response);//发生错误时执行的代码
        });
    },
  },
  mounted() {
    this.getTabelInfo();
  },
};
</script>
<style >
.image {
  width: 100px;
  margin: 0 auto;
}
</style>